<html>
	<head>
		<title>Chart demo</title>
<style type="text/css"> 
	body 
  { 
		font-family:Verdana; font-size:10pt; 
		width:100%%; height:100%%;  
		background-image: url(../behaviors/stone.png);
		padding:10px;
		margin:0;
    text-align:center;
	}

	.chart 
  {
	  behavior:chart;
	  color:black; /* our behavior will use it for "hands" */
	  width:50%;
	  height:50%;
    margin:*;
     
	  //background-color: white white yellow yellow;
    padding:15px;
    border:2px solid gray;
	}	
  
  button#animate 
  {
    color:red;
    click!: steps = $1(input#num-steps):value,     
            $1(widget#chart).animate(steps); // 'animate' is our custom method
  }
  
  
</style>
<script #data type="text/json" >
// behavior:chart accepts array of value/color pairs 
[
  { value: 0.7, color:#ff000080 } // note that colors are 0x80 (50%) transparent
  { value: 0.4, color:#ffaf0080 }  
  { value: 1.0, color:#00a00080 }
  { value: 0.8, color:#0040ff80 }
  { value: 0.5, color:#4000ff80 }
]
</script>

	</head>
	<body>
		<h1>Chart canvas demo extended by scripting calls.</h1>
    <p>See <code>behavior_chart.cpp</code> for an example of how to add your own methods seen to the script.</p>
    <p>Set number of steps: <input #num-steps type="number" value=32 size=4 max=100 step=1 /> and click on <button #animate >Animate!</button> to see this wonderful movie.</p>
		<widget #chart class="chart" data="script#data"/> 
	</body>
</html>
